//- this mixin builds panel with a spinner demo
mixin spinner-panel-manual(spinnername)
  // START panel
  .panel.panel-default
    .panel-heading
      = spinnername
    .panel-body(class="whirl #{spinnername}")
      p Suspendisse cursus, nisi eu aliquam ultricies, orci augue auctor mi, quis egestas nibh erat vitae justo. 
  // END panel

h3 Loading Spinners

h4.page-header Loaders.css
  small.text-muted Delightful and performance-focused pure css loading animations.

.row
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Pulse
      .panel-body.loader-demo
        .ball-pulse
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Grid Pulse
      .panel-body.loader-demo
        .ball-grid-pulse
          div
          div
          div
          div
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Clip Rotate
      .panel-body.loader-demo
        .ball-clip-rotate
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Clip Rotate Pul
      .panel-body.loader-demo
        .ball-clip-rotate-pulse
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Square Spin
      .panel-body.loader-demo
        .square-spin
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Clip Rotate Mul
      .panel-body.loader-demo
        .ball-clip-rotate-multiple
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Pulse Rise
      .panel-body.loader-demo
        .ball-pulse-rise
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Rotate
      .panel-body.loader-demo
        .ball-rotate
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Cube Transition
      .panel-body.loader-demo
        .cube-transition
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Zig Zag
      .panel-body.loader-demo
        .ball-zig-zag
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Zig Zag Deflect
      .panel-body.loader-demo
        .ball-zig-zag-deflect
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Triangle Path
      .panel-body.loader-demo
        .ball-triangle-path
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Scale
      .panel-body.loader-demo
        .ball-scale
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Line Scale
      .panel-body.loader-demo
        .line-scale
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Line Scale Party
      .panel-body.loader-demo
        .line-scale-party
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Scale Multiple
      .panel-body.loader-demo
        .ball-scale-multiple
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Pulse Sync
      .panel-body.loader-demo
        .ball-pulse-sync
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Beat
      .panel-body.loader-demo
        .ball-beat
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Line Scale Pulse Out
      .panel-body.loader-demo
        .line-scale-pulse-out
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Line Scale Pulse Out
      .panel-body.loader-demo
        .line-scale-pulse-out-rapid
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Scale Ripple
      .panel-body.loader-demo
        .ball-scale-ripple
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Scale Ripple Mu
      .panel-body.loader-demo
        .ball-scale-ripple-multiple
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Spin Fade Loade
      .panel-body.loader-demo
        .ball-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Line Spin Fade Loade
      .panel-body.loader-demo
        .line-spin-fade-loader
          div
          div
          div
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Triangle Skew Spin
      .panel-body.loader-demo
        .triangle-skew-spin
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Pacman
      .panel-body.loader-demo
        .pacman
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Ball Grid Beat
      .panel-body.loader-demo
        .ball-grid-beat
          div
          div
          div
          div
          div
          div
          div
          div
          div
  .col-md-3
    .panel.panel-default
      .panel-heading Semi Circle Spin
      .panel-body.loader-demo
        .semi-circle-spin
          div

h4.page-header Spin Kit

.row
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Rotating plane
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-rotating-plane
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Double bounce
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-double-bounce
          .sk-double-bounce1
          .sk-double-bounce2
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Wave
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-wave
          .sk-rect1
          .sk-rect2
          .sk-rect3
          .sk-rect4
          .sk-rect5
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Wandering cubes
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-wandering-cubes
          .sk-cube1
          .sk-cube2
  .col-md-4
    .panel.panel-default
      .panel-heading
        h5 Pulse
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-pulse
  .col-md-4
    .panel.panel-default
      .panel-heading
        h5 Chasing dots
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-chasing-dots
          .sk-dot1
          .sk-dot2
  .col-md-4
    .panel.panel-default
      .panel-heading
        h5 Three bounce
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-three-bounce
          .sk-bounce1
          .sk-bounce2
          .sk-bounce3
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Circle
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-circle
          .sk-circle1.sk-circle
          .sk-circle2.sk-circle
          .sk-circle3.sk-circle
          .sk-circle4.sk-circle
          .sk-circle5.sk-circle
          .sk-circle6.sk-circle
          .sk-circle7.sk-circle
          .sk-circle8.sk-circle
          .sk-circle9.sk-circle
          .sk-circle10.sk-circle
          .sk-circle11.sk-circle
          .sk-circle12.sk-circle
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Cube grid
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-cube-grid
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
          .sk-cube
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Fading circle
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-fading-circle
          .sk-circle1.sk-circle
          .sk-circle2.sk-circle
          .sk-circle3.sk-circle
          .sk-circle4.sk-circle
          .sk-circle5.sk-circle
          .sk-circle6.sk-circle
          .sk-circle7.sk-circle
          .sk-circle8.sk-circle
          .sk-circle9.sk-circle
          .sk-circle10.sk-circle
          .sk-circle11.sk-circle
          .sk-circle12.sk-circle
  .col-md-3
    .panel.panel-default
      .panel-heading
        h5 Spinner Wordpress
      .panel-body.loader-demo
        .sk-spinner.sk-spinner-wordpress
          span.sk-inner-circle



h4.page-header Whirl Loaders
  small.text-muted Based on modern CSS3 animations and ready to be used in Panels

- var spinners = ['standard', 'traditional', 'double-up', 'duo', 'blade', 'ringed', 'helicopter', 'line', 'line grow', 'line back-and-forth', 'line back-and-forth grow', 'sphere', 'sphere vertical', 'bar', 'bar follow', 'shadow', 'shadow oval', 'shadow oval right', 'no-overlay']
// START row
.row
  - each val in spinners
    .col-md-3
      +spinner-panel-manual(val)
// END row
